<template>
    <div style="height:100%;">
        <!-- <el-button type="primary" @click="handleToggle" style="position:absolute; z-index:100; right:0;">change</el-button> -->
        <div class="motion-container">
            <div
                v-for="(item, index) in data"
                :key="item.title"
                :class="{ 
                    'motion-item':true,  
                    'scaleOut': motionOpen && index === 0,
                    'scaleIn' : motionOpen && index === 1
                    }"
                :style="{
                    transform:`translateY(${ index * 54}px) scale(${  1 - index/10 })`,
                    backgroundImage:`url(${item.img})`,
                    opacity: 1 - index/10 * 3,
                    zIndex: 10 - index 
                }"
                >
                <!-- <div>{{ `item-${item.title}` }}</div> -->
            </div>
        </div> 
    </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import Bg1 from '../../../public/scroll-bg-1.png';
import Bg2 from '../../../public/scroll-bg-2.png';
import Bg3 from '../../../public/scroll-bg-3.png';
import Bg4 from '../../../public/scroll-bg-4.png';
import Bg5 from '../../../public/scroll-bg-5.png';
const timer = ref(null);
const motionTimer = ref(null);
const data = ref([

    { title:'3', img:Bg3 }, 
    { title:'2', img:Bg2 }, 
    { title:'1', img:Bg1 },
    { title:'5', img:Bg5 }, 
    { title:'4', img:Bg4 }, 
   
]);
const motionOpen= ref(false);

const handleToggle = ()=>{
    let arr = [...data.value];
    let firstEle = null;  
    clearTimeout(motionTimer.value);
    motionOpen.value = true;
    for(let i = 0; i < arr.length; i++){
        if ( i === 0 ) {
            firstEle = arr[0];
        }
        if ( i === arr.length - 1 ) {
            arr[i] = firstEle;
        } else {
            arr[i] = arr[i+1];
        }
    }
    // 动画结束重置状态
    motionTimer.value = setTimeout(()=>{
        motionOpen.value = false;
        data.value = arr;  
    }, 480)
}

onMounted(()=>{
    timer.value = setInterval(()=>{
        handleToggle();
    }, 4000)
})
onBeforeUnmount(()=>{
    clearInterval(timer.value);
    clearTimeout(motionTimer.value);
})

</script>
<style scoped>
    .motion-container {
        width:100%;
        height:100%;
        position:relative;
    }
    .motion-item {
        width:100%;
        height:100%;
        position:absolute;
        /* background:rgba(0, 0, 0, 0.15); */
        z-index:1;
        color:#fff;
        background-repeat:no-repeat;
        background-size:contain;
        background-position:50% 50%;
    }
    .motion-item.selected {
        background:blue;
        transform:translateY(0) scale(1) !important;
        z-index:10;
    }
    .scale-enter-active, .scale-leave-active {
        transition:all 10s;
    }
    .scale-enter-from, .scale-leave-to {
        opacity:0;
    }

    .motion-item.scaleOut {
        animation:scaleOut 0.5s ease-in-out forwards;
    }
    .motion-item.scaleIn {
        animation:scaleIn 0.5s ease-in-out forwards;
    }
    @keyframes scaleIn {
        0% {
            transform:translateY(54px) scale(0.9);
            opacity:0.5;
        }
        100% {
            transform:translateY(0) scale(1);
            opacity:1;
        }
    }
    @keyframes scaleOut {
        0% {
            transform:translateY(0) scale(1);
            opacity:1;
        }
        100% {
            transform:translateY( 54px) scale(0.9);
            opacity:0.2;
        
        }
    }
</style>